<script setup lang="ts">
import { Navigate } from '@/utils'
import { onReady, onNavigationBarButtonTap } from "@dcloudio/uni-app"
import { Histogram, Goods, UserFilled, MessageBox, Printer, Calendar } from '@element-plus/icons-vue'

import Storage from "@/modal/useStorage";
import i18n from '@/main'

const indicatorDots = ref(true)
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(500)

onReady(() => {
  uni.setNavigationBarTitle({
    title: i18n.global.locale === 'zh' ? '首页' : 'Home'
  });
})

onNavigationBarButtonTap(async (e) => {
  if (i18n.global.locale == 'en') {
    // 切换到中文
    i18n.global.locale = 'zh';
    uni.setNavigationBarTitle({
      title: '首页'
    });
    Storage.set('locale', 'zh')
  } else {
    // 切换到英文
    i18n.global.locale = 'en';
    uni.setNavigationBarTitle({
      title: 'HOME'
    });
    Storage.set('locale', 'en')
  }
})


function gotospgl(index: Number) {
  if (index == 0) {
    Navigate.to('/pages/hkb/product/product')
  }
  if (index == 1) {
    Navigate.to('/pages/hkb/admit/admit')
  }
  if (index == 2) {
    Navigate.to('/pages/hkb/electronic/electronic')
  }
  if (index == 3) {
    Navigate.to('/pages/hkb/tagPrint/tagPrint')
  }
  if (index == 4) {
    Navigate.to('/pages/hkb/calendar/index')
  }
}
// UserService.getTask('/api/user/list')?.abort()
</script>

<template>
  <view class="uni-margin-wrap">
    <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
      :duration="duration">
      <swiper-item>
        <el-image src="https://static.fotor.com.cn/assets/projects/pages/b6f27a72-ad3a-4432-bf99-67e4184d99a1_8231a1e1-87e6-4256-ac2e-47e307ef22ee_thumb.jpg" />
      </swiper-item>
      <swiper-item>
        <el-image src="https://static.fotor.com.cn/assets/projects/pages/b6f27a72-ad3a-4432-bf99-67e4184d99a1_8231a1e1-87e6-4256-ac2e-47e307ef22ee_thumb.jpg" />
      </swiper-item>
      <swiper-item>
        <el-image src="https://static.fotor.com.cn/assets/projects/pages/b6f27a72-ad3a-4432-bf99-67e4184d99a1_8231a1e1-87e6-4256-ac2e-47e307ef22ee_thumb.jpg" />
      </swiper-item>
    </swiper>
  </view>
  <el-row class="content">
    <el-col :span="8">
      <view class="item">
        <view class="card">
          <Histogram class="icon" color="#2296F3" />
          <view>{{ $t(`index.tab1`) }}</view>
        </view>
      </view>
    </el-col>
    <el-col :span="8" @click="gotospgl(0)">
      <view class="item">
        <view class="card">
          <Goods class="icon" color="#2296F3" />
          <view>{{ $t(`index.tab2`) }}</view>
        </view>
      </view>
    </el-col>
    <el-col :span="8" @click="gotospgl(1)">
      <view class="item">
        <view class="card">
          <UserFilled class="icon" color="#2296F3" />
          <view>{{ $t(`index.tab3`) }}</view>
        </view>
      </view>
    </el-col>
    <el-col :span="8" @click="gotospgl(2)">
      <view class="item">
        <view class="card">
          <MessageBox class="icon" color="#2296F3" />
          <view>{{ $t(`index.tab4`) }}</view>
        </view>
      </view>
    </el-col>
    <el-col :span="8" @click="gotospgl(3)">
      <view class="item">
        <view class="card">
          <Printer class="icon" color="#2296F3" />
          <view>{{ $t(`index.tab5`) }}</view>
        </view>
      </view>
    </el-col>
    <el-col :span="8" @click="gotospgl(4)">
      <view class="item">
        <view class="card">
          <Calendar class="icon" color="#2296F3" />
          <view>{{ $t(`index.tab6`) }}</view>
        </view>
      </view>
    </el-col>
  </el-row>
</template>
<style>
.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

.content {
  .item {
    padding: 20rpx;
    text-align: center;

    .card {
      background: #F8F8F8;
      width: 100%;
      padding: 40rpx 0;
    }

    .icon {
      width: 60rpx;
    }
  }
}
</style>
